<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_3792212_d37o6qo3t9b/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html ,body{
            min-height: 1000px;
        }
        body{
         position: relative;
        }
        .box {
            min-height: 1000px;
            display: flex;
        }

        .box ul {
            width: 200px;
            list-style: none;
            background-color: #304156;
        }

        .box h2 {
            text-align: center;
            font-size: 18px;
            color: white;
            margin-bottom: 20px;
        }

        .box div p {
            height: 40px;
            padding-left: 10px;
        }

        .box div span {
            margin-right: 10px;
        }

        .box div p:nth-child(1) {
            font-size: 15px;
            color: #bfcbd9;
        }

        .box div p:nth-child(2) {
            color: white;
        }

        .box ul li {
            background-color: #1f2d3d;
            height: 40px;
            color: #bfcbd9;
            padding-left: 30px;
        }

        .box ul li:nth-child(7) {
            color: #409eff;
        }

        .box ul li span {
            margin-right: 20px;
        }

        .box main {
            flex: 1;
            min-height: 1000px;
            padding: 10px;
        }

        .box main header {
            display: flex;
            justify-content: space-between;
            height: 50px;
        }

        .box main header h2 {
            color: #000;
        }

        .box main header div img {
            width: 20px;
            height: 20px;
            margin-left: 20px;
            margin-right: 30px;
        }

        .box main .top {
            height: 40px;
            margin-bottom: 20px;
        }

        .box main .top span:nth-child(1) {
            border: 1px solid gray;
        }

        .box main .top span:nth-child(2) {
            padding: 5px;
            display: inline-block;
            background-color: #409eff;
        }

        .box main .inp {
            height: 50px;

        }

        .box main .inp input {
            width: 300px;
            height: 30px;
            padding-left: 10px;
            border: 1px solid gray;
            outline: none;
            color: gray;
            border-radius: 10px;
            margin-right: 10px;
        }

        .box main .inp button {
            width: 60px;
            background-color: white;
            border: 1px solid gray;
            margin-right: 10px;
            height: 30px;
            cursor: pointer;
        }

        .box main .inp button span {
            font-size: 14px;
        }

        .box main .inp .chazhao {
            background-color: #409eff;
        }

        .box main .data button {
            width: 50px;
            height: 20px;
            border: 1px solid;
        }

        .box main .data button:nth-child(1) {
            color: #409eff;
            background-color: #40a0ff8e;
        }

        .box main .data button:nth-child(2) {
            color: green;
            background-color: rgba(0, 128, 0, 0.563);
        }

        .box main .data button:nth-child(3) {
            color: red;
            background-color: rgba(255, 0, 0, 0.574);
        }

        .box main .data button:nth-child(4) {
            color: orange;
            background-color: rgba(255, 166, 0, 0.568);
        }

        .box main table {
            width: 100%;
            border-collapse: collapse;
        }
        .box main table tbody {
            text-align: center;
        }
        .box main table thead tr th{
            border-bottom: 1px solid gray;
            height: 30px;
        }
        .box main table tbody tr td{
            border-bottom: 1px solid gray;
            height: 30px;
        }
        .box main table tbody tr td span{
            margin-right: 10px;
        }
        .box main .bottom{
            width: 200px;
            margin:20px auto;
        }
        .box main .bottom button{
            width: 30px;
            height: 30px;
            background-color: gray;
            border: none;
        }

        .new{
            width: 400px;
            height: 120px;
            border: 1px solid gray;
            position: absolute;
            left: 50%;
            margin-left: -200px;
            top: 400px;
            background-color: white;
            display: none;
            border-radius: 10px;
            background-color: cadetblue;
        }
        .new line{
            height: 50px;
        }
        .new .line input{
            height: 40px;
            width: 300px;
            margin-top: 5px;
            border: none;
            outline: none;
        }
        .new button{
            width: 40px;
            height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <h2>管理系统</h2>
            <div>
                <p><span class="iconfont icon-shouye"></span>首页</p>
                <p><span class="iconfont icon-xitongguanli"></span>系统管理</p>
            </div>
            <li><span class="iconfont icon-yonghu"></span>用户管理</li>
            <li><span class="iconfont icon-jiaoseguanli"></span>角色管理</li>
            <li><span class="iconfont icon-caidan"></span>菜单管理</li>
            <li><span class="iconfont icon-bumen"></span>部门管理</li>
            <li><span class="iconfont icon-gangwei"></span>岗位管理</li>
            <li><span class="iconfont icon-zidianguanli"></span>字典管理</li>
            <li><span class="iconfont icon-canshushuru"></span>参数设置</li>
            <li><span class="iconfont icon-gonggao"></span>通知公告</li>
            <li><span class="iconfont icon-rizhi"></span>日志管理</li>
            <div>
                <p><span class="iconfont icon-jiankong"></span>系统监控</p>
            </div>
        </ul>
        <main>
            <header>
                <h2><span class="iconfont icon-gengduo1"></span></h2>
                <div>
                    <span class="iconfont icon-fangdajing"></span>
                    <img src="./img/login-background.jpg" alt="">
                </div>
            </header>
            <div class="top">
                <span>首页</span>
                <span>岗位管理</span>
            </div>
            <div class="inp">
                <span>岗位名称</span>
                <input type="text" placeholder="请输入岗位名称">
                <button class="chazhao"><span class="iconfont icon-fangdajing"></span>搜索</button>
                <button>重置</button>
            </div>
            <div class="data">
                <button id="but">+新增</button>
                <button>+修改</button>
                <button>+删除</button>
                <button>+导出</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>岗位编号</th>
                        <th>岗位编码</th>
                        <th>岗位名称</th>
                        <th>岗位排序</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                 
                </tbody>
            </table>
            <div class="bottom">
                <span class="length">0</span>
                <button> <</button>
                <span class="page">1</span>
                <button>></button>
            </div>
        </main>
    </div>

    <div class="new">
         <div class="line">
            <span>岗位名称：</span>
            <input type="text"placeholder="请输入名称">
         </div>
         <div class="line">
            <span>岗位编码：</span>
            <input type="text"placeholder=”请输入数字“>
         </div>
         <button>确认</button>
    </div>
</body>

</html>
<script src="./axios.min.js"></script>
<script src="./index.js"></script>